<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 搜索框 -->
      <el-form>
        搜索学科 <el-input v-model="input" style="width:150px" placeholder="请输入关键字"></el-input>
        <!-- 按钮区 -->
        <el-button size="mini" @click="clear" class="mybtn">清除</el-button>
        <el-button type="primary" @click="search" size="mini">搜索</el-button>
        <el-button @click="openSub(1, '0')" type="success" class="el-icon-edit" size="mini">新增学科</el-button>
      </el-form>
      <!-- 数据显示 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon class="info"> </el-alert>
      <!-- 表格区 :data="list" -->
      <el-table :data="list" class="mytable" style="width: 100%">
        <el-table-column prop="" label="序号" type="index"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
          <template slot-scope="scope">
            {{ getTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示"></el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button type="text" @click="PushClassify(scope.row)">学科分类</el-button>
            <el-button type="text" @click="push(scope.row)">学科标签</el-button>
            <el-button type="text" @click="updateSub(scope.row)">修改</el-button>
            <el-button type="text" @click="delSub(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增面板 -->
      <myAddsub ref="myAddsub" :dialogShow.sync="dialogShow" @updateData="Create"></myAddsub>
      <!-- 修改面板 -->
      <el-dialog title="修改学科" :visible.sync="dialogshow" width="25%">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="form.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            {{ form.isFrontDisplay }}
            <span>不可见</span>
            <el-switch
              v-model="form.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
            <span>可见</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </el-dialog>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pageSiazs"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { list, remove, update } from '@/api/hmmm/subjects.js'
export default {
  data() {
    return {
      input: '',
      form: {
        // 学科名称
        subjectName: '',
        isFrontDisplay: ''
      },
      // 表单校验规则
      rules: {
        subjectName: [{ required: true, message: '请输入学科名', trigger: 'blur' }]
      },
      // 修改面板显示与隐藏
      dialogshow: false,
      // 新增面板显示与隐藏
      dialogShow: false,
      // 从接口处取回
      list: [],
      loading: true,
      // 当前选中的页码
      page: 1,
      // 页容量合集
      pageSiazs: [10, 15, 20],
      // 选中的页容量
      pagesize: 10,
      // 总条数
      total: 20
    }
  },
  methods: {
    // 搜索学科
    async search() {
      const res = await list({
        subjectName: this.input
      })
      this.list = res.data.items
    },
    // 清除
    clear() {
      this.input = ''
      // 刷新页面 重新获取数据
      this.Create()
    },
    // 修改
    // 关闭面板
    cancle() {
      this.dialogshow = false
      // 清空数据
      this.form = {
        subjectName: '',
        isFrontDisplay: ''
      }
    },
    getData(type) {
      this.form.type = type
    },
    async submit() {
      // 数据提交到服务器
      await update(this.form)
      // 提示修改成功
      this.$message.success('修改成功')
      // 关闭面板
      this.dialogshow = false
      // 更新数据
      this.Create()
    },
    async listApi(id) {
      const res = await list(id)
      console.log(res)
      this.form = res.data.items
    },
    // 跳转到学科管理
    push(row) {
      this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
    },
    // 跳转到学科分类
    PushClassify(row) {
      this.$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)
    },
    // 删除
    delSub(id) {
      this.$confirm('是否删除此学科?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // 要删除的数据提交到服务器
          await remove(id)
          // 提示删除成功
          this.$message.success('删除成功')
          // 更新数据
          this.Create()
        })
        .catch(() => {})
    },
    // 修改面板
    updateSub(row) {
      // 打开修改面板
      this.dialogshow = true
      console.log(123)
      this.form = { ...row }
    },
    // 新增学科面板
    openSub(type) {
      // 打开新增面板
      this.dialogShow = true
      this.$refs.myAddsub.getData(type)
    },
    // 获取学科列表
    async Create() {
      const res = await list({
        page: this.page,
        pagesize: this.pagesize
      })
      // 保存数据
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 页容量发生改变时触发
    handleSizeChange(size) {
      this.pagesize = size
      // 重新获取数据
      this.Create()
    },
    // 页面改变时触发
    handleCurrentChange(page) {
      this.page = page
      // 重新获取数据
      this.Create()
    },
    // 时间转换
    getTime(date) {
      var d = new Date(date)
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate()
      var hours = d.getHours()
      var minutes = d.getMinutes()
      var seconds = d.getSeconds()

      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      var newDate = year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' + seconds
      return newDate
    }
  },
  // 总条数
  computed: {
    Counts() {
      return '数据一共' + this.counts + '条'
    }
  },

  // 注册新增面板组件
  components: {
    myAddsub: () => import('../components/subjects-add.vue')
  },
  created() {
    // 打开页面,得到数据
    this.Create()
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .mySelect {
    margin-left: 5px;
  }
  .mybtn {
    margin-left: 5px;
  }
  .el-icon-edit {
    float: right;
  }
  .mytable {
    margin-top: 20px;
    line-height: 20px;
  }
  .el-icon-info {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    padding: 15px;
    font-size: 14px;
    background-color: #f4f4f5 !important;
    color: #909399;
  }
}
// 分页组件
.block {
  float: right;
}
.info {
  margin-top: 15px;
}
</style>
